<script setup lang="ts">

import {useFlowStore} from '../../../stores/flow'
import {getCurrentInstance,watch} from "vue";

let flowStore = useFlowStore();


const step2FormList = computed(() => {
	let step2 = flowStore.step2;

	return step2;
})
const {proxy} = getCurrentInstance();

//表单
const formList = computed(() => {
	let value = step2FormList.value;

	let $deepCopy = proxy.$deepCopy(value.filter(res=>res.type!='MultiSelect'&&res.type!='UploadImage'&&res.type!='UploadFile'));


	$deepCopy.push({
		id: 'root',
		name: '发起人',
		type: "SelectUser",
		typeName: "用户"
	})

	return $deepCopy;
})
let props = defineProps({
	condition: {
		type: Object,
		default: () => {
		},
	},
});


const formIdObj = computed(() => {
	var obj = {}
	for (var item of formList.value) {
		obj[item.id] = item;
	}
	return obj
})

const  conditionVal=computed(()=>{
	return	 props.condition;
})


//表达式
let expression = ref(
		{
			"SelectDept": [
				{
					key: "in",
					name: "属于"
				}, {
					key: "notin",
					name: "不属于"
				}
			],

			"SelectUser": [
				{
					key: "in",
					name: "属于"
				}, {
					key: "notin",
					name: "不属于"
				}
			],

			"Input": [
				{
					key: "==",
					name: "等于"
				}, {
					key: "!=",
					name: "不等于"
				}
			],

			"Textarea": [
				{
					key: "==",
					name: "等于"
				}, {
					key: "!=",
					name: "不等于"
				}
			],
			"Number": [
				{
					key: "==",
					name: "等于"
				}, {
					key: "!=",
					name: "不等于"
				}, {
					key: ">",
					name: "大于"
				}, {
					key: ">=",
					name: "大于等于"
				}, {
					key: "<",
					name: "小于"
				}, {
					key: "<=",
					name: "小于等于"
				}
			],
			"Money": [
				{
					key: "==",
					name: "等于"
				}, {
					key: "!=",
					name: "不等于"
				}, {
					key: ">",
					name: "大于"
				}, {
					key: ">=",
					name: "大于等于"
				}, {
					key: "<",
					name: "小于"
				}, {
					key: "<=",
					name: "小于等于"
				}
			],
			"SingleSelect": [
				{
					key: "in",
					name: "属于"
				}, {
					key: "notin",
					name: "不属于"
				}
			]
		}
)
import selectShow from "@/views/flow/workflow/components/dialog/selectAndShow.vue";


</script>

<template>
	<div>
		<el-select v-model="condition.key" placeholder="选择表单" style="width: 100%;">
			<el-option
					v-for="f in formList"
					:key="f.id"
					:label="f.name"
					:value="f.id"
			/>
		</el-select>

		<el-select v-model="condition.expression" placeholder="选择关系" style="width: 100%;margin-top: 20px">

			<el-option
					v-for="f in expression[formIdObj[condition.key]?.type]"
					:key="f.key"
					:label="f.name"
					:value="f.key"
			/>
		</el-select>

			<el-input  v-model="condition.value" v-if="formIdObj[condition.key]?.type==='Input'||
formIdObj[condition.key]?.type==='Textarea'
" style="margin-top: 20px;" placeholder="条件值"></el-input>

	  <el-input-number v-model="condition.value"
			v-if="formIdObj[condition.key]?.type==='Money'||
formIdObj[condition.key]?.type==='Number'
"
	  placeholder="条件值"
	  style="width: 100%;margin-top: 20px"
			  controls-position="right"
	  />

	  <el-select v-model="condition.value"
			v-if="formIdObj[condition.key]?.type==='SingleSelect'
"
	  style="width: 100%;margin-top: 20px"
	  multiple
	  collapse-tags
	  collapse-tags-tooltip

						placeholder="请选择值"  >
		  <el-option
				  v-for="item in formIdObj[condition.key].props.options"
				  :key="item.key"
				  :label="item.value"
				  :value="item.key"
		  />
	  </el-select>
			<div style="margin-top: 20px">
		  <select-show  v-if="formIdObj[condition.key]?.type==='SelectUser'
" v-model:orgList="condition.value" type="org" :multiple="true"></select-show>
			</div>
	  <div style="margin-top: 20px">

	  <select-show   v-if="formIdObj[condition.key]?.type==='SelectDept'
" v-model:orgList="condition.value" type="dept" :multiple="true"></select-show>
		</div>

	</div>
</template>

<style scoped lang="less">

</style>
